<template>
	<div class="detail">
		<div class="detail_head">
			<div class="head_left" @click = 'back'>
                <img src="https://m.mi.com/component/header/img/back_48bef14.png" alt="" />
            </div>
			<div class="head_right">
                <img src="https://m.mi.com/component/header/img/share_18c55d7.png" alt="" />
            </div>
		</div>
		<!--<h1>{{ $route.params.id }}</h1>-->
		
		<div class="detail_silder">
		    <swiper :options="swiperOption" ref="mySwiper">
                <!-- slides -->
                <swiper-slide v-for="item in allData1" :key="item">
                    <img :src="item">
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
            </swiper>
		</div>
        <div class="titleView">
        	<p>{{ dataName }}</p>
            <p>{{ allData2 }}</p>
            <p>￥{{ dataPrice }}</p>
         </div>
         <div class="detail_sele">
            <p>已选</p>
            <p>小米6 全网通版 6GB+64GB 亮黑色 x1</p>
         </div>
         <div class="detail_fen">
           <p>促销</p>
           <p>可分期</p>
         </div>
         <div class="detail_xian">
            <div><img src="https://m.mi.com/views/product/view/img/gps_90d5f88.png" alt="" /></div>
            <span>北京北京市东城区永定门外街道</span>
            <p>有现货</p>
         </div>
         <ul class="detail_can">
          <li><router-link to='/detail1/xiang'>概述</router-link></li>
           <span>|</span>
          <li><router-link to='/detail1/canshu'>参数</router-link></li>
         </ul>
          <router-view></router-view>
          
          <foote></foote>
	</div>
</template>

<script>

    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import foote from '../components/footer.vue'
	
	export default{
        data(){
            return{
                allData:[], allData1: [], allData2: [],dataName:[],dataPrice:[],
                swiperOption: {
                    autoplay: 1000,
                    direction: 'horizontal',
                    pagination: '.swiper-pagination'
                }
            }
        },
		created(){
			this.axios.get('../static/data/detail_3.json').then(res =>{
				this.allData = res.data.data;
                this.allData1 = res.data.data.view_content.galleryView.galleryView;
                this.allData2 = res.data.data.product_info.product_desc;
                this.dataName = res.data.data.product_info.name;
                this.dataPrice = res.data.data.goods_info[0].price;
                console.log(this.allData2);
			})
		},
        components: {
            swiper, swiperSlide,foote
        },
        methods:{
        	back: function(){
        	    history.go(-1);
        	}
        }
	}
</script>

<style scoped>
   .detail_head{
   	position: absolute;
   	left: 0;
   	top: 0;
   	right: 0;
   	height: 0.48rem;
   	padding: 0 .15rem;
   	    z-index: 20;
   }
   .detail_head .head_left{
   	position: absolute;
   	top: .1rem;
   	left: .15rem;
   	
   	
   }
   .detail_head .head_left img{
   	position: absolute;
   	width: 0.25rem;
   	height: .25rem;
   }
    .detail_head .head_right{
   	position: absolute;
   	
   }
   .detail_head .head_right img{
   	position: absolute;
   	width: 0.25rem;
   	height: .25rem;
   	    top: .1rem;
    left: 3.6rem;
   }
   .detail_silder{
   	height: 4.56rem;
   	overflow: hidden;
   }
   .detail_silder .swiper-container{
   	  height: 4.56rem;
   	overflow: hidden;
   }
   .detail_silder .swiper-container .swiper-pagination{
   	height: 1rem;
   }
   .detail_silder .swiper-slide img{
   	width: 100%;
   }
   .titleView{
   	height: 1.6rem;
   	box-sizing: border-box;
   	padding: .2rem;
   	   }
   .titleView p:first-of-type{
   	   font-size: .24rem;
   	   
   }
   .titleView p:nth-of-type(2){
   	font-size: .14rem;
   	
   }
    .titleView p:last-of-type{
    	font-size: .24rem;
    	color: #f56600;
    	margin-top: .1rem;
    	padding-bottom: .1rem;
    	border-bottom: .01px solid gray;
    	
    }
    .detail_sele{
    	height: .75rem;
        font-size: .15rem;
        padding: 0 .2rem .2rem;
        border-bottom: .1rem solid #efeff0 ;
    }
    .detail_sele p:first-of-type{
    	color: rgba(0,0,0,.54);
    	padding-bottom: .1rem;
    }
      .detail_fen{
    	height: .75rem;
        font-size: .15rem;
        padding: 0 .2rem .2rem;
        border-bottom: .1rem solid #efeff0 ;
    }
    .detail_fen p:first-of-type{
    	color: rgba(0,0,0,.54);
    	padding-top: .1rem;
    	padding-bottom: .1rem;
    }
    .detail_fen p:last-of-type{
    	color: #f56600;
    	border: 1px solid #f56600;
    	border-radius: 1px;
    	padding: .02rem;
    	width: .5rem;
    	height: .2rem;
    }
    .detail_xian{
    	
    	height: .75rem;
        font-size: .15rem;
        padding: 0 .2rem .2rem;
        padding-top: .2rem;
        border-bottom: .1rem solid #efeff0 ;
    }
    .detail_xian>div{
    	float: left;
    	margin-right: .1rem;
    }
    .detail_xian>div>img{
    	height: .18rem;
    	width: .13rem;
    }
    .detail_xian>p{
    	margin-left: .21rem;
    	margin-top: .1rem;
    	color: #f56600;
    }
    .detail_can{
    	height: .52rem;
    	width: 100%;
    	display: flex;
    	align-items: center;
    	justify-content: space-around;
    	border-bottom: 1px solid #f4f4f4;
    	color: rgba(0,0,0,.87);
    	overflow: hidden;
    	
    }
    
    .detail_can li{
    	width: 48%;
    	text-align: center;
    	border-right: 1px solid #E5E5E5;
    	vertical-align: middle;
    	font-size: .16rem;
    }
    .detail_can span{
    	display: inline-block;
    	width: 1px;
    	height: .16rem;
    }
    
</style>